<template>
  <div>模型拓扑图</div>
  <div class="chart-container" ref="chartVM" />
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { useChart, convertData } from '@/hooks/useGraph/index'
import {
  getGraphViewApi,
  getGraphDataApi,
  getGraphORMApi,
} from '@/api/model/graph'

export default defineComponent({
  name: 'MovieGraph',
  props: {},
  setup() {
    const chartVM = ref()
    let chart = null

    onMounted(async () => {
      console.log(chartVM.value)
      chart = useChart({
        container: chartVM.value,
      })

      const { data: graphData } = await getGraphDataApi()
      const { data: graphView } = await getGraphViewApi()
      const { data: graphORM } = await getGraphORMApi()
      const data = convertData({ graphData, graphView, graphORM })
      console.log(data)
      chart.render(data)
    })
    return {
      chartVM,
    }
  },
})
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100vw;
  height: 80vh;
  background: #fff;
}
</style>
